<template>
	<view class="content">
		<view style="height: 14rpx;background: #EDEDED;"></view>
		<view class="head">
			<view :class="{ time: index == 0 }" @click="tbs">时间管理</view>
			<view :class="{ time: index == 1 }" @click="tbs_now">今日预约</view>
		</view>
		<!-- //时间管理 -->
		<view v-if="index == 0">
			<view class="xx">
				<uni-calendar :lunar="false" @change="changed" :showMonth="false" @monthSwitch="closeBox()"></uni-calendar>
				<view class="bb" v-if="hide">
					<view class="week_day">
						<view v-for="(item,index) in list" :key='index' @click="getDay(item.years,index,item)" :class="{icons:active==index}">
							<view>{{item.day}}</view>
							<view :class="{icon_time:active==index,week_time:true} ">{{item.years_more}}</view>
						</view>
					</view>
					<view class="infors">
						<view v-for="(item,index) in AppointmentList" :key="index" :class="{boxs:true,active:item.status=='可预约'}" @click="close(item)">
							<view>{{item.times}}</view>
							<view>{{item.status}}</view>
						</view>
						<view class="bott">
							<view class="tishi">温馨提示</view>
							<view class="text">做好预约时间安排，避免预约等位和影响顾客体验。</view>
						</view>
					</view>



				</view>

			</view>

			<view style="height: 14rpx;background: #EDEDED;"></view>


			<view v-if="hide1" style="padding:20rpx">
				<view class="uni-list-cell uni-list-cell-pd" >
					<view class="uni-list-cell-db lis">店铺接单开启</view>
					<switch :checked="checked" color="#00C6C2" style="transform: scale(0.7);" @change="switchChange" />
				</view>

				<view class="uni-list-cell uni-list-cell-pd" @click="pick">
					<view class="uni-list-cell-db lis">店铺接单开启</view>
					<view>
						<text style="font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #ADADAD;">
							{{ tim }} >
						</text>
						<u-picker mode="multiSelector" v-model="show" :default-selector="[0, 1]" :range="multiSelector" @confirm="getItem"
						 :disabled='true'></u-picker>
					</view>										
				</view>

				<view class="uni-list-cell uni-list-cell-pd" @click="pick2">
					<view class="uni-list-cell-db lis">公休息日设定</view>
					<view>
						<text style="font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #ADADAD;">
							{{ text }}
						</text>
						<u-picker mode="selector" v-model="show1" :range="lists" @confirm="getItem2"></u-picker>
					</view>
				</view>
				<view class="footer">
					<!-- //保存按钮 -->
					<view class="save" @click="save"><text style="opacity: 0.7;">保存</text></view>
				</view>
			</view>

		</view>


		<!-- //今日预约 -->
		<view v-if="index == 1" class="now_time">
			<view class="week_day">
				<view v-for="(item,index) in list" :key='index' @click="getDay(item.years,index,item)" :class="{icons:active==index}">
					<view>{{item.day}}</view>
					<view :class="{icon_time:active==index,week_time:true} ">{{item.years_more}}</view>
				</view>
			</view>
			<view class="infors">
				<view v-for="(item,index) in AppointmentList" :key="index" :class="{boxs:true,active:item.status=='可预约'}" @click="close(item)">
					<view>{{item.times}}</view>
					<view>{{item.status}}</view>
				</view>
				<view class="bott">
					<view class="tishi">温馨提示</view>
					<view class="text">做好预约时间安排，避免预约等位和影响顾客体验。</view>
				</view>
			</view>



		</view>
		<view v-if="hide3">
			<!-- 今日预约 -->
			<view class="list" v-for="(item,index) in detailList2" :key='item.id'>
				<view class="list_top">
					<view class="list_left">
						<view class="left_top">今天 {{item.orderCreateTime|getHours()}} {{item.introduceDetails}}·{{item.userNumber}}人
							<!-- <text class="upTime">修改时间</text> -->
						</view>
						<view>
							<text class="scrail1"></text><text class="public">服务:</text><text class="public_text">{{item.introduceDetails}}
							</text>
						</view>
						<view>
							<text class="scrail2"></text><text class="public">用时:</text><text class="public_text">预计{{item.estimatedTime}}小时
							</text>
						</view>
					</view>
					<view class="list_right">
						<view @click="call(item.userPhone)"><text class="icon iconfont">&#xe63e;</text></view>
						<view><text class="log">￥</text><text class="price">{{item.orderPayAmount}}</text></view>
					</view>
				</view>

				<view class="list_botom">
					<view class="list-bot-left">
						<view class="imgs">
							<u-avatar :src="item.technicianPhoto" level-icon='man' size="70" mode="circle" sex-icon="woman" show-sex="true"></u-avatar>
						</view>

						<view class="list-con">
							<view class="list-con-top">
								<text>{{item.technicianName}}</text>
								<text class="mei">美VIP</text>
								<text class="shi">实名认证</text>
							</view>
							<view class="list-con-bot">
								<text>预约{{item.technicianNumberCount}}次</text>|
								<text>好评{{item.technicianScore}}分</text>
							</view>
						</view>
					</view>

					<view class="right-list">
						<text class="right-list-text1" @click="cancel(index)">取消</text>
						<text class="right-list-text2">接单</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="hide2">
			<view class="list" v-for="(item,index) in detailList" :key='item.id'>
				<view class="list_top">
					<view class="list_left">
						<view class="left_top">今天 {{item.orderCreateTime|getHours()}} {{item.introduceDetails}}·{{item.userNumber}}人
							<!-- <text class="upTime">修改时间</text> -->
						</view>
						<view>
							<text class="scrail1"></text><text class="public">服务:</text><text class="public_text">{{item.introduceDetails}}
							</text>
						</view>
						<view>
							<text class="scrail2"></text><text class="public">用时:</text><text class="public_text">预计{{item.estimatedTime}}小时
							</text>
						</view>
					</view>
					<view class="list_right">
						<view @click="call(item.userPhone)"><text class="icon iconfont">&#xe63e;</text></view>
						<view><text class="log">￥</text><text class="price">{{item.orderPayAmount}}</text></view>
					</view>
				</view>

				<view class="list_botom">
					<view class="list-bot-left">
						<view class="imgs">
							<u-avatar :src="item.technicianPhoto" level-icon='man' size="70" mode="circle" sex-icon="woman" show-sex="true"></u-avatar>
						</view>

						<view class="list-con">
							<view class="list-con-top">
								<text>{{item.technicianName}}</text>
								<text class="mei">美VIP</text>
								<text class="shi">实名认证</text>
							</view>
							<view class="list-con-bot">
								<text>预约{{item.technicianNumberCount}}次</text>|
								<text>好评{{item.technicianScore}}分</text>
							</view>
						</view>
					</view>

					<view class="right-list">
						<text class="right-list-text1" @click="cancel(index)">取消</text>
						<text class="right-list-text2">接单</text>
					</view>
				</view>
			</view>
		</view>

		<uni-popup type="bottom" ref='cancel'>
			<view class="quxiao">
				<view class="title">取消订单</view>
				<view class="text1">取消订单将会影响个人信誉排名</view>
				<view class="text2">注：每日拒绝超过2次，平台将限制其未来24小时内不能再接单.</view>
				<view class="btn">
					<view class="cancel" @click="can">取消</view>
					<view class="quedin" @click="jieOk">确定</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {
		getDateAppointment,
		getAppointDateMessage,
		getTimeManagement,
		addCmsTimeManagement,
		setTodayTimeMessageClose,
		setTodayTimeMessageStart
	} from '@/admin_api/index.js'
	export default {
		data() {
			return {
				multiSelector: [
					['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00',
						'20:00', '21:00', '22:00', '23:00', '00:00'
					],
					['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00',
						'20:00', '21:00', '22:00', '23:00', '00:00'
					]
				],
				show: false,
				show1: false,
				tim: '', //时间区域
				lists: ['1', '2'], //休息的列表
				text: '未设置休息日 >',
				index: 0,
				hide: false,
				hide1: true,
				list: [],
				active: 0,
				time: '8:00-21:00',
				AppointmentList: [], //预约时间列表
				detailList: [],
				detailList2: [],
				hide2: false,
				hide3: false,
				checked: 1, //控制滑块的状态
				day: '', //控制那一天休息
				year: '' //当前月日年
			};
		},
		methods: {
			changed(e) {
				this.hide = true
				this.hide1 = false
				this.hide2 = true
				this.active = 0
				this.year = e.fulldate
				let that = this
				that.list.length = 0
				that.time = e.month + '-' + e.date
				console.log(that.time);
				for (var i = 0; i < 7; i++) {
					var weekDayArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] //星期映射数组
					var myDate = new Date(e.fulldate)
					var milliseconds = myDate.getTime() + 1000 * 60 * 60 * 24 * i; //当i为0代表当前日期，为1时可以得到明天的日期，以此类推
					var newMyDate = new Date(milliseconds);
					var weekDay = newMyDate.getDay(); //获取当前星期X(0-6,0代表星期天)
					var year = newMyDate.getFullYear(); //获取当前年
					var month = newMyDate.getMonth() + 1; //获取当前月
					var day = newMyDate.getDate(); //获取当前日
					// console.log(year+'/'+month+'/'+day+weekDayArr[weekDay])
					var obj = {
						years: month + '-' + day,
						years_more: month + '月' + day + '日',
						day: weekDayArr[weekDay],
						all: year + '-' + month + '-' + day
					}
					that.list.push(obj)
				}
				console.log(that.list)
				this.getList()
				this.getAppointDateMessageList(e.fulldate)

			},
			// 点击切换月份
			closeBox(e) {
				this.hide = false
				this.hide1 = true
				this.hide2 = false
				// console.log(e)

			},
			//弹出选择时间
			pick() {
				this.show = true;
			},
			//弹出选择休息日期
			pick2() {
				this.show1 = true;
			},
			//修改选择时间
			getItem(e) {
				console.log(e);
				this.tim = this.multiSelector[0][e[0]] + '-' + this.multiSelector[1][e[1]];
			},
			//修改休息日期
			getItem2(e) {
				console.log(e);
				this.day = this.lists[e[0]]
				this.text = '当前休息日为' + this.day + ' >';
			},
			//点击保存
			save() {
				let data = {
					managementOrderReceiving: this.checked,
					businessTime: this.tim,
					publicRest: this.day
				}
				this.AppointmentList.length = 0
				addCmsTimeManagement(data).then(res => {
					if (res[1].data.message == '操作成功') {
						uni.redirectTo({
							url: './index'
						})
					}

				})
				console.log(data)
			},
			//点击时间管理
			tbs() {
				this.index = 0
				this.hide3 = false
				this.hide2 = true
			},
			//点击今日预约
			tbs_now() {
				this.index = 1
				this.list.length = 0
				this.hide3 = true
				this.hide2 = false
				this.getTime()
				this.getList()
				this.getAppointDateMessageList(this.year)
			},
			//获取时间
			getTime() {
				for (var i = 0; i < 7; i++) {
					var weekDayArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] //星期映射数组
					var myDate = new Date()
					var milliseconds = myDate.getTime() + 1000 * 60 * 60 * 24 * i; //当i为0代表当前日期，为1时可以得到明天的日期，以此类推
					var newMyDate = new Date(milliseconds);
					var weekDay = newMyDate.getDay(); //获取当前星期X(0-6,0代表星期天)
					var year = newMyDate.getFullYear(); //获取当前年
					var month = newMyDate.getMonth() + 1; //获取当前月
					var day = newMyDate.getDate(); //获取当前日
					// console.log(year+'/'+month+'/'+day+weekDayArr[weekDay])
					var obj = {
						years: month + '-' + day,
						years_more: month + '月' + day + '日',
						day: weekDayArr[weekDay],
						all: year + '-' + month + '-' + day
					}
					this.list.push(obj)
				}
				// this.list[0].day='今天'
				// this.list[1].day='明天'
				// this.list[2].day='后天'
				this.time = this.list[0].years.replace(/\//g, '-')
				this.year = this.list[0].all
			},
			getDay(y, index, item) {
				console.log(item.all)
				this.year = item.all
				this.active = index
				let a = y.replace(/\//g, '-')
				this.time = a
				this.getList()
				this.getAppointDateMessageList(item.all)
				// console.log(this.time )


			},
			//点击关闭预约
			close(item) {
				console.log(item)
				let that = this
				let data = {
					all: that.year,
					time: item.times
				}
				if (item.status == '可预约') {
					uni.showModal({
						title: '提示',
						content: '是否关闭预约',
						success: function(res) {
							if (res.confirm) {
								//发送关闭请求

								console.log(data)
								setTodayTimeMessageClose(data).then(ress => {
									console.log(ress)
									item.status = '已关闭'
								}).catch(er => {
									console.log(e)
								})

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				if (item.status == '已关闭') {
					uni.showModal({
						title: '提示',
						content: '是否开启预约',
						success: function(res) {
							if (res.confirm) {
								// 发送开启请求
								setTodayTimeMessageStart(data).then(ress => {


									item.status = '可预约'
								}).catch(errr => {
									console.log(errr)
								})

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

				}

			},
			//获取列表数据
			getList() {
				let that = this
				uni.showToast({
					icon: "loading",
					duration: 9999
				})
				// 获取预约列表
				getDateAppointment("9-30").then(res => {
					if (res) {
						uni.hideToast()
					}
					that.detailList = res[1].data.data
					that.detailList2 = res[1].data.data
					// console.log(that.detailList[0].orderCreateTime)

					console.log(that.detailList)
				}).catch(err => {
					console.log(err)
				})
			},
			//点击取消
			cancel(index) {
				this.$refs.cancel.open()
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			can() {
				this.$refs.cancel.close()
			},
			//接单确定
			jieOk() {
				this.$refs.cancel.close()
			},
			//获取预约时间段的列表
			getAppointDateMessageList(datas) {
				let that = this
				let arr1 = []
				let data = datas
				getAppointDateMessage(data).then(res => {
					if (res[1].data.data === null) {
						that.AppointmentList = []
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
						return
					}
					let Can_appointment = res[1].data.data.appointmentSure.split(',')

					let str = res[1].data.data.appointmentAlready + ',' + res[1].data.data.appointmentSure + ',' + res[1].data.data.appointmentClose
					// console.log(res[1].data.data.appointmentClose.split(','))

					let new_arr = str.split(',').sort()

					let a = []
					if (res[1].data.data.appointmentClose != null) {
						let close = res[1].data.data.appointmentClose.split(',')

						for (let i = 0; i < arr1.length; i++) {
							for (let j = 0; j < close.length; j++) {
								if (arr1[i].times == close[j]) {
									arr1[i].status = '已关闭'
								}
							}
						}

					}



					new_arr.map(x => {
						if (x != 'null' && x != '') {
							a.push(x)
						}
					})
					console.log("======", a)
					for (let i = 0; i < a.length; i++) {
						arr1.push({
							times: a[i],
							status: '已预约'
						})
					}

					for (let i = 0; i < arr1.length; i++) {
						for (let j = 0; j < Can_appointment.length; j++) {
							if (arr1[i].times == Can_appointment[j]) {
								arr1[i].status = '可预约'
							}
						}
					}

					that.AppointmentList = arr1
				})
			},
			//获取时间管理相关信息
			getPageAppoint() {
				getTimeManagement().then(res => {

					this.tim = res[1].data.data.businessTime
					this.lists = res[1].data.data.publicRest.split(',')
					this.change = res[1].data.data.managementOrderReceiving

				}).catch(err => {

				})
			},
			//点击滑块
			switchChange(e) {
				// console.log(e.target.value)
				this.change = e.target.value == true ? 1 : 0

				console.log(this.change)
			}
		},
		mounted() {

			this.getTime()
			this.getPageAppoint()



		},
		filters: {
			getHours(t) {
				let hours = new Date(t).getUTCHours()
				let min = new Date(t).getMinutes().toString().padStart("2", 0)
				let str = hours + ':' + min

				return str
			}
		}
	};
</script>

<style scoped lang="less">
	.content {

		// padding-bottom: 157rpx;
		.head {
			display: flex;
			padding: 42rpx 25rpx;
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #8a8a8a;
			line-height: 30rpx;
			align-items: center;

			view {
				margin-right: 69rpx;
			}

			// height: 25rpx;
			.time {
				font-size: 36rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #00c6c2;
			}
		}
		.uni-list-cell-pd{
			padding: 15rpx 0;
			border-bottom: 1rpx solid #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.lis {
			font-size: 28rpx !important;
			font-family: PingFang SC;
			font-weight: 400;
			color: #282828;
			line-height: 28rpx;
		}

		.footer {
			.save {
				margin: 130rpx auto;
				width: 700rpx;
				height: 85rpx;
				// margin-bottom: 157rpx;
				background: #00c6c2;
				text-align: center;
				line-height: 85rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #ffffff;
				font-size: 36rpx;
			}
		}

		//今日预约
		.now_time {
			height: 750rpx;
			margin-bottom: 10rpx;
		}

	}

	//日历

	.week_day {
		display: flex;
		justify-content: space-around;

		font-size: 26rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #777777;

		background: white;

		.icons {

			font-size: 26rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #000000;

			border-bottom: 4rpx solid #1EBBBD;
		}

		.week_time {


			font-size: 16rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #777777;

		}

		.icon_time {
			font-size: 23rpx !important;
			color: #000000;
		}
	}

	.infors {
		width: 100%;
		height: 94%;
		padding-left: 27rpx;
		padding-right: 27rpx;
		position: relative;

		.boxs {
			width: 140rpx;
			height: 100rpx;
			display: inline-block;
			border: 1rpx solid #BFBFBF;
			border-radius: 4rpx;
			margin-right: 27rpx;
			margin-left: 10rpx;
			margin-top: 39rpx;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #777777;
			line-height: 36rpx;
		}

		.active {
			border: 1rpx solid #1EBBBD !important;
			color: #1EBBBD !important;
		}

	}

	.xx {
		position: relative;

	}

	.bb {
		width: 100%;
		height: 95%;
		// background-color: #00c6c2;
		background: white;
		position: absolute;
		top: 12%;
		left: 0;


	}

	.bott {
		padding-left: 27rpx;
		position: absolute;
		bottom: 12rpx;
		left: 0;

		.tishi {

			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #404040;
		}

		.text {

			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #707070;
		}
	}



	// 列表
	.list {
		height: 297rpx;
		background-color: white;
		margin-top: 29rpx;
		padding: 29rpx 27rpx;
		box-shadow: 0px 2rpx 6rpx 0rpx rgba(113, 113, 113, 0.26);

		.list_top {
			display: flex;
			align-items: center;
			border-bottom: 0.4rpx solid #E1E1E1;

			.list_left {
				.left_top {

					font-size: 30rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #282828;
					line-height: 30rpx;

					.upTime {
						display: inline-block;
						width: 90rpx;
						background: #ECECEC;
						border-radius: 17rpx;
						text-align: center;
						line-height: 38rpx;
						margin-left: 20rpx;
						font-size: 17rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #282828;
					}
				}

				.scrail1 {
					display: inline-block;
					width: 10rpx;
					height: 10rpx;
					background: #00C6C2;
					border-radius: 50%;
					margin-right: 9rpx;
				}

				.scrail2 {
					display: inline-block;
					width: 10rpx;
					height: 10rpx;
					background: black;
					border-radius: 50%;
					margin-right: 9rpx;
				}

				.public {

					font-size: 24rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #414141;
					margin-right: 9rpx;
				}

				.public_text {
					font-size: 24rpx;
					font-family: PingFang;
					color: #414141;
					line-height: 30rpx;
				}
			}

			.list_right {
				// width: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-between;

				.iconfont {
					font-size: 60rpx;
					color: #9f9f9f;
				}

				.log {
					font-size: 22rpx;
					color: #000000;
					font-family: PingFang-SC-Regular;
				}

				.price {
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}

		.list_botom {
			padding: 22rpx 0 0 0;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.list-bot-left {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.imgs {
					flex: 1;
					margin-right: 15rpx;
				}

				.list-con {
					.list-con-top {

						text {
							display: inline-block;

							font-size: 24rpx;
							font-family: PingFang;
							font-weight: 500;
							color: #333333;
							line-height: 30rpx;
						}

						.mei {
							// width: 62rpx;
							height: 24rpx;
							background: #000000;
							border-radius: 4rpx;
							text-align: center;
							line-height: 24rpx;
							font-size: 16rpx;
							font-family: PingFang;
							font-weight: 500;
							color: #F0D9A9;
							// line-height: 30px;
							margin-left: 24rpx;
						}

						.shi {
							width: 75rpx;
							height: 24rpx;
							background: #F1F1F1;
							border-radius: 4px;
							line-height: 24rpx;
							text-align: center;
							margin-left: 24rpx;
							font-size: 16rpx;
							font-family: PingFang;
							font-weight: 500;
							color: #A5A0A0;
							line-height: 30rpx;
						}
					}

					.list-con-bot {
						display: inline-block;
						font-size: 18rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #777777;
						line-height: 30rpx;
					}

				}
			}

			.right-list {
				display: flex;
				flex: 2;
				justify-content: flex-end;
				justify-content:;

				text {
					display: inline-block;
				}

				.right-list-text1 {
					width: 106rpx;
					height: 58rpx;
					border: 1rpx solid #979797;
					border-radius: 4rpx;
					text-align: center;
					line-height: 58rpx;
					color: #979797;
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: 500;
					margin-right: 24rpx;
				}

				.right-list-text2 {
					width: 141rpx;
					height: 58rpx;
					background: #00C6C2;
					border-radius: 4rpx;
					text-align: center;
					line-height: 58rpx;
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}

	//取消
	.quxiao {
		width: 100%;
		height: 800rpx;
		background: white;
		text-align: center;

		.title {
			height: 100rpx;
			border-bottom: 1rpx #E0E0E0 solid;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #282828;
			line-height: 30rpx;
			text-align: center;
			line-height: 100rpx;
		}

		.text1 {
			margin-top: 49rpx;
			margin-bottom: 49rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #282828;
		}

		.text2 {
			width: 445rpx;
			height: 59rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #515151;
			line-height: 36rpx;
			margin: 0 auto;
			margin-bottom: 49rpx;
		}

		.btn {
			margin: 0 auto;
			width: 452rpx;
			height: 67rpx;
			display: flex;
			justify-content: space-between;

			.cancel {
				width: 227rpx;
				height: 67rpx;
				background: #00C6C2;
				text-align: center;
				line-height: 67rpx;
				border: 1rpx solid #A5A0A0;
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FFFFFF;
			}

			.quedin {
				width: 227rpx;
				height: 67rpx;
				border: 1rpx solid #A5A0A0;
				line-height: 67rpx;
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #414141;
			}
		}
	}
</style>
